<template>
	<view class="content">
		<view class="block swiper-block">
			<SwiperMap style="width: 100%;height: 100%;" :list="swiperList"></SwiperMap>
		</view>
		<view @click="navigate('/page_other/help/help')" class="btn-block">
			<view class="iconfont btn-icon icon-kefu"></view>
			<view class="name">帮帮我</view>
		</view>
		<view class="block menu-block">
			<block v-if="identity==1">
				<view @click="navigate('/page_other/job_hunting/job_hunting')" class="menu-item">
					<image :src="imageUrl+'/home/1.png'" class="menu-icon"></image>
					<view class="menu-name">招聘求职</view>
				</view>
				<view @click="navigate('/page_other/article/index?type=22')" class="menu-item">
					<image :src="imageUrl+'/home/2.png'" class="menu-icon"></image>
					<view class="menu-name">考试报名</view>
				</view>
				<view @click="showDevelopingTips()" class="menu-item">
					<image :src="imageUrl+'/home/3.png'" class="menu-icon"></image>
					<view class="menu-name">零工超市</view>
				</view>
				<view hover-class="none" @click="navigate('/page_other/train/index')" class="menu-item">
					<image :src="imageUrl+'/home/4.png'" class="menu-icon"></image>
					<view class="menu-name">技能培训</view>
				</view>
				<view hover-class="none" @click="navigate('/page_other/policy/index')" class="menu-item">
					<image :src="imageUrl+'/home/5.png'" class="menu-icon"></image>
					<view class="menu-name">政策补贴</view>
				</view>
			</block>
			<block v-if="identity==2">
				<view @click="navigate('/page_other/job_hunting/job_hunting')" class="menu-item">
					<image :src="imageUrl+'/home/1.png'" class="menu-icon"></image>
					<view class="menu-name">招聘英才</view>
				</view>
				<view hover-class="none" @click="navigate('/page_other/policy/index')" class="menu-item">
					<image :src="imageUrl+'/home/2.png'" class="menu-icon"></image>
					<view class="menu-name">政策补贴</view>
				</view>
				<view @click="showDevelopingTips()" class="menu-item">
					<image :src="imageUrl+'/home/3.png'" class="menu-icon"></image>
					<view class="menu-name">零工超市</view>
				</view>
				<view hover-class="none" @click="navigate('/page_other/article/index?type=17')" class="menu-item">
					<image :src="imageUrl+'/home/4.png'" class="menu-icon"></image>
					<view class="menu-name">以训稳岗</view>
				</view>
				<view hover-class="none" @click="navigate('/page_other/article/index?type=18')" class="menu-item">
					<image :src="imageUrl+'/home/5.png'" class="menu-icon"></image>
					<view class="menu-name">社保服务</view>
				</view>
			</block>
		</view>
		<block v-if="identity==1">
			<view class="block feature-block">
				<view @click="navigate('/page_other/live/index')" class="left-feature">
					<view class="feature">
						<view class="headline">直播带岗</view>
						<view class="subtitle">职等你来</view>
					</view>
				</view>
				<view class="right-feature">
					<!-- <view @click="navigate('/page_other/difficult_job/index?type=21')" class="feature-item">
						<view class="headline">就业困难</view>
						<view class="headline" style="margin-top: 10rpx;">人员专区</view>
					</view> -->
					<view @click="navigate('/page_other/obtain_employment/obtain_employment')" class="feature-item">
						<view class="headline">家门口就业</view>
						<view class="headline" style="margin-top: 10rpx;"></view>
					</view>
					<view @click="navigate('/page_other/employment/index')" open-type="switchTab" class="feature-item">
						<view class="headline">快速就业</view>
						<view class="headline" style="margin-top: 10rpx;"></view>
					</view>
					<!--<view @click="switchTo('/pages/found/index')" open-type="switchTab" class="feature-item">
						<view class="headline">一键匹配岗位</view>
						<view class="headline" style="margin-top: 10rpx;"></view>
					</view> -->
					<view @click="navigate('/page_other/job_hunting/job_fair/index')" class="feature-item">
						<view class="headline">招聘会</view>
						<view class="subtitle">助力就业扶贫</view>
					</view>
					<view @click="navigate('/page_other/base_map/publish')" class="feature-item">
						<view class="headline">地图就业</view>
						<view class="subtitle"></view>
					</view>
					<view @click="navigate('/page_other/article/index?type=20')" class="feature-item">
						<view class="headline">国企招聘</view>
						<view class="subtitle"></view>
					</view>
					<view @click="navigate('/page_other/business_loan/business_loan')" open-type="switchTab"
						class="feature-item">
						<view class="headline">创业贷款</view>
						<view class="headline" style="margin-top: 10rpx;"></view>
					</view>
					<!-- <view @click="navigate('/page_other/article/index?type=20')" class="feature-item">
						<view class="headline">国企招聘</view>
						<view class="subtitle"></view>
					</view> -->
				</view>
			</view>
		</block>
		<block v-if="identity==2">
			<view class="block feature-block1">
				<view @click="navigate('/page_other/live/index')" class="left-feature">
					<view class="feature">
						<view class="headline">直播带岗</view>
						<view class="subtitle">职等你来</view>
					</view>
				</view>
				<view class="right-feature">
					<view @click="navigate('/page_other/base_map/index?type=23')" class="feature-item">
						<view class="headline">青年见习</view>
						<view class="headline" style="margin-top: 10rpx;">计划</view>
					</view>
					<view @click="switchTo('/pages/found/index')" open-type="switchTab" class="feature-item">
						<view class="headline">一键匹配求职者</view>
						<view class="headline" style="margin-top: 10rpx;"></view>
					</view>
					<view @click="navigate('/page_other/job_hunting/job_fair/index')" class="feature-item">
						<view class="headline">招聘会</view>
						<view class="subtitle">助力就业扶贫</view>
					</view>
					<!-- <view @click="navigate('/page_other/article/index?type=19&name=人力资源招引')" class="feature-item">
						<view class="headline">人力资源</view>
						<view class="headline">招引</view>
					</view> -->
					<view @click="navigate('/page_other/business_loan/business_loan')" open-type="switchTab"
						class="feature-item">
						<view class="headline">创业贷款</view>
						<view class="headline" style="margin-top: 10rpx;"></view>
					</view>
				</view>
			</view>
		</block>
		<view class="block article-block" v-if="identity==1">
			<view class="article-tab">
				<view @click="publishActive=1" :class="publishActive===1?'active':''" class="tab-item">热招职位</view>
				<view @click="publishActive=2" :class="publishActive===2?'active':''" class="tab-item">离我最近</view>
			</view>
			<view class="article-list" style="padding-top: 30rpx;">
				<template v-if="hotJob.length>0">
					<view
						@click="navigate('/page_other/job_hunting/job_detail/index?id='+item.id+'&jobType='+item.jobType)"
						class="list-item" v-for="(item,index) in hotJob" :key="item.id">
						<view class="list-info">
							<view class="title-info">
								<view class="title">{{item.jobTitle}}</view>
								<view class="fast-job" v-if="item.worry">急招</view>
							</view>
							<view class="detail-item">
								<view class="money-item">
									<view class="wage" v-if="item.minSalary">{{item.minSalary}}-{{item.maxSalary}}元
									</view>
									<view class="wage" v-else>面议</view>
								</view>
								<view class="detail-info">
									<view class="name">{{item.comRecruiters.comPosition}}</view>
									<image mode="aspectFill" :src="item.comRecruiters.user.faceUrl" class="photo">
									</image>
								</view>
							</view>
							<view class="address-item">
								<view class="address iconfont icon-dizhi">{{item.jobAddress}}</view>
								<view class="distance">距离:{{item.distances}}KM</view>
							</view>
							<view class="label-block">
								<view class="label-item" v-for="label in item.label">{{label}}</view>
							</view>
						</view>

					</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>
		</view>
		<view class="block article-block" v-if="identity==1">
			<view class="article-tab">
				<view class="tab-item active">热门企业</view>
			</view>
			<view class="article-list" style="padding-top: 30rpx;">
				<template v-if="hotEnterprise.length>0">
					<view @click="navigate('/page_other/company/company?id='+item.id)" class="enterprise-item"
						v-for="(item,index) in hotEnterprise" :key="item.id">
						<image :src="item.logoUrl ? item.logoUrl : imageUrl+'/job_hunting/job_detail/enterprise.jpg'"
							@error="onErrorImg(item)" class="cover-photo"></image>
						<view class="list-info">
							<view class="title">{{item.brandName}}</view>
							<view class="address">
								<view class="add" v-if="item.enterpriseName">{{item.enterpriseName}}</view>
								<view class="add" v-else style="margin-left: 0px;">暂无企业类型</view>
								<view class="add">/ {{item.scaleName}}</view>
							</view>
							<view class="positionCount"><text style="color: #fe7526;">{{item.fairCount}}</text>个热招职位
							</view>
						</view>
					</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>
		</view>
		<view class="block article-block">
			<view class="article-tab">
				<view @click="noticeActive=1" :class="noticeActive===1?'active':''" class="tab-item">政策法规</view>
				<view @click="noticeActive=2" :class="noticeActive===2?'active':''" class="tab-item">通知公告</view>
				<view @click="noticeActive=3" :class="noticeActive===3?'active':''" class="tab-item">职场资讯</view>
			</view>
			<view class="article-list">
				<view @click="navigate('/page_other/article/detail?id='+item.id)" class="article-item"
					v-for="(item,index) in newsList" :key="item.id">
					<image mode="aspectFill" :src="item.ima_url" class="cover-photo"></image>
					<view class="info">
						<view class="title overflow-line">{{item.title}}</view>
						<view class="abstract">{{item.abstract}}</view>
						<view class="time">{{item.crt_time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNewsList as getNewsListApi
	} from '@/api/notice.js'
	import {
		getSwiperList as getSwiperListApi
	} from '@/api/static.js'
	import {
		showDevelopingTips
	} from '@/util/util.js'
	import {
		getPublishApi,
		getHotEnterprise
	} from '@/api/job_hunting.js'
	export default {
		data() {
			return {
				noticeActive: 1,
				publishActive: 1,
				oderDate: 1,
				orderDistance: 0,
				latitude: 0,
				longitude: 0,
				newsList: [],
				imageUrl: '',
				swiperList: [],
				hotJob: [],
				hotEnterprise: [],
			}
		},
		watch: {
			noticeActive: {
				handler() {
					this.getNewsList()
				},
				immediate: true
			},
			publishActive: {
				handler(val) {
					if (val == 1) {
						this.oderDate = 1;
						this.orderDistance = 0;
					} else {
						this.oderDate = 0;
						this.orderDistance = 1;
					}
					this.getHotList()

				},
				immediate: true
			},
		},
		methods: {
			//onShareAppMessage 分享给朋友
			// #ifdef MP
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				return {
					title: '就业平台',
					path: '/pages/home/index'
				}
			},
			showDevelopingTips()
			{
				wx.navigateToMiniProgram({
					appId: 'wx4f87cfee9fe6c79f',
					path: 'pages/home/index',
					success(res) {
						// 打开成功
						console.log('打开成功')
					}
				})

			},
			// #endif
			onErrorImg(item) {
				this.$set(item, 'logoUrl', this.imageUrl + '/job_hunting/job_detail/enterprise.jpg');
			},

			getHotList() {
				if (this.identity == 1) {
					uni.getLocation({
						isHighAccuracy: true,
						success: (current) => {
							this.latitude = current.latitude;
							this.longitude = current.longitude;
							console.log(this.latitude)
							getPublishApi({
								page: 1,
								limit: 4,
								oderDate: this.oderDate,
								orderDistance: this.orderDistance,
								longitude: this.longitude,
								latitude: this.latitude,
								distances: this.publishActive
							}).then((res) => {
								this.hotJob = res.list;
							})
						},
						fail: (e) => {
							this.showToast('获取位置失败，请重试！');
						}
					})

					getHotEnterprise({
						page: 1,
						limit: 3
					}).then((res) => {
						this.hotEnterprise = res.list
					})
				}
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			switchTo(url) {
				uni.switchTab({
					url
				});
			},
			getNewsList() {
				getNewsListApi({
					page: 1,
					limit: 3,
					type: this.noticeActive
				}).then((res) => {
					this.newsList = res.list ?? [];
				})
			},
			getSwiperList() {
				getSwiperListApi({
					userType: this.$store.getters.identity
				}).then((res) => {
					this.swiperList = res ?? []
				})
			}
		},
		computed: {
			identity() {
				return this.$store.getters.identity
			}
		},
		onLoad() {
			this.imageUrl = this.globalConfig.imageUrl
			this.getSwiperList();
			this.getHotList();
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		//background-image: linear-gradient(#FB093B, #F8F8F8, #F8F8F8);
		min-height: 100vh;
		position: relative;
		padding-bottom: 30rpx;

		.top-bg {
			width: 100%;
		}

		.btn-block {
			position: fixed;
			right: 20rpx;
			bottom: 30rpx;
			z-index: 999;
			width: 130rpx;
			height: 130rpx;
			color: #333;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 50%;
			box-shadow: 0 0 18rpx 0 #dddddd;

			.btn-icon {
				width: 50rpx;
				height: 50rpx;
				text-align: center;
				font-size: 56rpx;
				margin-bottom: 10rpx;
			}

			.name {
				text-align: center;
				width: 100%;
			}
		}

		.map-img {
			width: 100%;
		}

		.block {
			width: 100%;
			margin-bottom: 30rpx;
			padding: 30rpx;
		}

		.block.header-block {
			position: relative;
			display: flex;
			flex-direction: row;
			height: 70rpx;
			align-items: center;

			.search {
				background: #fff;
				height: 100%;
				border-radius: 40rpx;
				padding: 0 20rpx;
				padding-left: 70rpx;
				font-size: 28rpx;
				flex-grow: 1;
			}

			.iconfont.icon-sousuo {
				position: absolute;
				transform: translate(0, -50%);
				top: 50%;
				left: 20rpx;
				font-size: 38rpx;
				font-weight: bold;
				color: #999;
			}
		}

		.block.menu-block {
			width: 100%;
			width: calc(100% - 60rpx);
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			position: relative;
			margin-top: -160rpx;
			background: #fff;
			border-radius: 5px;

			.menu-item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 26rpx;

				.menu-icon {
					margin-top: 10rpx;
					width: 100rpx;
					height: 100rpx;
				}

				.menu-name {
					margin-top: 10rpx;
				}
			}
		}

		.block.swiper-block {
			height: 620rpx;
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
			padding: 0;
		}

		.block.feature-block {
			height: 480rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			color: #484848;
			margin-bottom: 0;

			.headline {
				font-weight: bold;
				font-size: 28rpx;
			}

			.subtitle {
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.left-feature {
				width: calc((100%/3) - 6rpx);
				margin-right: 12rpx;

				.feature {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					padding: 20rpx;
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/live_with_duty.jpg') no-repeat center;
					background-size: 100% 100%;
				}
			}

			.right-feature {
				width: calc((100%/3*2) - 6rpx);
				height: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.feature-item {
					width: calc(50% - 6rpx);
					height: calc(32% - 6rpx);
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-radius: 12rpx;
					padding: 20rpx;
				}

				.feature-item:nth-child(odd) {
					margin-right: 10rpx;
				}

				.feature-item:nth-child(1) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/difficult.jpg') no-repeat center;
					background-size: 100% 100%;

				}

				.feature-item:nth-child(2) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/to_support.jpg') no-repeat center;
					background-size: 100% 100%;

				}

				.feature-item:nth-child(3) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/job_fair.jpg') no-repeat center;
					background-size: 100% 100%;
				}

				.feature-item:nth-child(4) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/six.png') no-repeat center;
					background-size: 100% 100%;
				}

				.feature-item:nth-child(5) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/three_a_help.jpg') no-repeat center;
					background-size: 100% 100%;
				}

				.feature-item:nth-child(6) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/five.jpg') no-repeat center;
					background-size: 100% 100%;
				}
			}
		}

		.block.feature-block1 {
			height: 370rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			color: #484848;
			margin-bottom: 0;

			.headline {
				font-weight: bold;
				font-size: 28rpx;
			}

			.subtitle {
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.left-feature {
				width: calc((100%/3) - 6rpx);
				margin-right: 12rpx;

				.feature {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					padding: 20rpx;
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/live_with_duty.jpg') no-repeat center;
					background-size: 100% 100%;
				}
			}

			.right-feature {
				width: calc((100%/3*2) - 6rpx);
				height: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.feature-item {
					width: calc(50% - 6rpx);
					height: calc(49% - 6rpx);
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-radius: 12rpx;
					padding: 20rpx;
				}

				.feature-item:nth-child(odd) {
					margin-right: 10rpx;
				}

				.feature-item:nth-child(1) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/difficult.jpg') no-repeat center;
					background-size: 100% 100%;

				}

				.feature-item:nth-child(2) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/to_support.jpg') no-repeat center;
					background-size: 100% 100%;

				}

				.feature-item:nth-child(3) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/job_fair.jpg') no-repeat center;
					background-size: 100% 100%;
				}

				.feature-item:nth-child(4) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/six.png') no-repeat center;
					background-size: 100% 100%;
				}
			}
		}

		.block.article-block {
			width: calc(100% - 60rpx);
			margin: 0 auto;
			border-radius: 10rpx;
			background: #fff;
			padding-bottom: 0;

			.article-tab {
				width: 100%;
				height: 70rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-weight: bold;
				font-size: 34rpx;
				color: #313131;

				.tab-item {
					margin-right: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.tab-item.active {
					color: #E06F59;
					border-bottom: 2px solid #DE6349;
					height: 100%;
				}

				.tab-item:last-child {
					margin: 0;
				}
			}

			.article-list {
				width: 100%;
				display: flex;
				flex-direction: column;

				.enterprise-item {
					width: 100%;
					background: #fff;
					border-radius: 10rpx;
					box-shadow: 0 0 10px 0 #efefef;
					padding: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					margin: 20rpx auto;

					.cover-photo {
						width: 150rpx;
						height: 150rpx;
						background: #efefef;
						margin-right: 20rpx;
						border-radius: 20rpx;

					}

					.list-info {
						width: 70%;
						display: flex;
						flex-direction: column;

						view {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.title {
							color: #000;
							font-weight: bold;
							font-size: 34rpx;
						}

						.address {
							display: flex;
							flex-direction: row;

							.add {
								color: #999;
								font-size: 26rpx;
								margin-top: 20rpx;
							}
						}

						.city {
							color: #999;
							font-size: 26rpx;
							margin-left: 4rpx;
						}

						.imgs2 {
							width: 17px;
							height: 17px;
							margin-left: 70rpx;
							vertical-align: bottom;
						}

						.positionCount {
							font-size: 28rpx;
							margin-top: 20rpx;
						}

						.label-block {
							font-size: 24rpx;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: left;
							margin-top: 20rpx;

							.label-item {
								padding: 8rpx 20rpx;
								background: #F5F6F8;
								color: #999;
								margin: 0 10rpx 20rpx 0;
							}
						}

						.wage {
							color: #FE7526;
							font-size: 36rpx;
							font-weight: bold;

							.unit {
								font-size: 28rpx;
								font-weight: normal;
							}
						}
					}
				}

				.list-item {
					width: 100%;
					background: #fff;
					border-radius: 10rpx;
					box-shadow: 0 0 10px 0 #efefef;
					padding: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					margin-bottom: 20rpx;

					.detail-info {
						width: 260rpx;
						//height: 200rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: center;
						align-items: center;

						.name {
							width: 110rpx;
							font-size: 24rpx;
							color: #999;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: center;
							text-indent: 15rpx;
						}

						.photo {
							width: 70rpx;
							height: 70rpx;
							border-radius: 100%;
							background: #efefef;
						}

						.apply-btn {
							border: 1px solid #FE7526;
							border-radius: 8rpx;
							color: #FE7526;
							font-size: 24rpx;
							padding: 8rpx 28rpx;
							position: relative;
							left: 30rpx;
						}
					}

					.list-info {
						// width: calc(100% - 180rpx);
						width: 100%;
						display: flex;
						flex-direction: column;

						>view {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.title-info {
							display: flex;
							flex-direction: row;
							align-items: center;

							.title {
								color: #000;
								font-weight: bold;
								font-size: 34rpx;
							}

							.fast-job {
								width: 60rpx;
								height: 38rpx;
								border: 1rpx solid #FE7526;
								font-size: 24rpx;
								text-align: center;
								color: #FE7526;
								margin-left: 20rpx;
								border-radius: 6rpx;
							}
						}

						.detail-item {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.money-item {
								margin-top: 20rpx;

								.wage {
									color: #FE7526;
									font-size: 36rpx;
									font-weight: bold;

									.unit {
										font-size: 28rpx;
										font-weight: normal;
									}
								}
							}

							.detail-info {
								width: 180rpx;
								// height: 200rpx;
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								justify-content: center;
								align-items: center;

								.name {
									width: 110rpx;
									font-size: 24rpx;
									color: #999;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									text-align: center;
									text-indent: 15rpx;
								}

								.photo {
									width: 70rpx;
									height: 70rpx;
									border-radius: 100%;
									background: #efefef;
								}

								.apply-btn {
									border: 1px solid #FE7526;
									border-radius: 8rpx;
									color: #FE7526;
									font-size: 24rpx;
									padding: 8rpx 28rpx;
									position: relative;
									left: 30rpx;
								}
							}
						}

						.address-item {
							display: flex;
							justify-content: space-between;

							.address {
								width: 440rpx;
								color: #999;
								font-size: 26rpx;
								margin-top: 20rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.distance {
								color: #999;
								font-size: 26rpx;
								margin-top: 20rpx;
							}
						}

						.label-block {
							font-size: 24rpx;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: left;
							margin-top: 20rpx;

							.label-item {
								padding: 8rpx 20rpx;
								background: #F5F6F8;
								color: #999;
								margin: 0 10rpx 20rpx 0;
							}
						}

						.wage {
							color: #FE7526;
							font-size: 36rpx;
							font-weight: bold;

							.unit {
								font-size: 28rpx;
								font-weight: normal;
							}
						}
					}
				}

				.article-item {
					height: 220rpx;
					width: 100%;
					padding: 30rpx 0;
					border-bottom: 1px solid #efefef;
					display: flex;
					flex-direction: row;

					.cover-photo {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
						background: #efefef;
					}

					.info {
						width: calc(100% - 180rpx);
						height: 100%;

						.title {
							font-weight: bold;
						}

						.abstract {
							font-size: 24rpx;
							color: #999;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							margin-top: 6rpx;
							line-height: 1.5;
						}

						.time {
							font-size: 28rpx;
							color: #999;
						}
					}
				}

				.article-item:last-child {
					border: none;
				}
			}
		}
	}
</style>